import {baseUrl} from "../../settings/Settings.ts";
import {Stack} from "../../model/Stack.ts";
import {LineBook} from "../../model/LineBook.ts";


const ProfileBookCard = (props: { lineBook: LineBook }) => {

    const {lineBook} = props



    return (
        <div className="col" id={"profile-book-card"}>
            <div className="card">
                <img className="bd-placeholder-img card-img-top image-holder crop-image" id={"image-library-card"}
                     src={baseUrl + lineBook.stack.imageUrl} alt=""
                     width="100%"/>
                <div className="card-body">
                    <p className="card-text mb-0">{lineBook.stack.title}</p>
                    <p className="text-secondary p-0 mt-1">{lineBook.stack.description}</p>
                    <div className="d-flex justify-content-between align-items-center">
                        <div className="btn-group">
                            <button type="button"
                                    className="btn btn-sm btn-outline-secondary rounded-start-4 btn-view">Details
                            </button>
                            <button type="button"
                                    className="btn btn-sm btn-outline-secondary rounded-end-4 btn-purchase"
                                    value={String(lineBook.stack.itemId)}>Return
                            </button>
                        </div>
                        <span className="badge rounded-pill p-2">
              <span>{lineBook.borrowedTill}</span>
            </span>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default ProfileBookCard